<template>
  <view>
    <select v-model="selectedTime" @change="onTimeChange">
      <option value="" disabled selected>请选择时间段</option>
      <option
        v-for="(option, index) in timeOptions"
        :key="index"
        :value="option"
        :disabled="!backendData.times[index]"
      >
        {{ option }}
      </option>
    </select>
  </view>
</template>

<script>
import popup from '../../uni_modules/uni-popup/components/uni-popup/popup';
export default {
  props: {
    backendData: {
      type: Object,
      required: true
    },
    severId:{
      type: Number,
      required: true
    }
  },
  data() {
    return {
      timeOptions: ['8:00-10:00', '10:00-12:00', '14:00-16:00', '16:00-18:00'],
      selectedTime: '',
      
    };
  },
  computed: {
    filteredTimeOptions() {
      return this.timeOptions.filter((_, index) => this.backendData.times[index]);
    }
  },
  methods: {
    onTimeChange() {
      this.$emit('time-selected', this.selectedTime,this.severId);
    }
  }
};
</script>

<style scoped>
select {
  width: 200upx;
  /* padding: 10px; */
  /* border: 1px solid #ccc; */
  /* border-radius: 5px; */
  appearance: none; /* 去除默认样式 */
      -webkit-appearance: none;
      -moz-appearance: none;
      background: white;
  border: none;
  outline: none;
  /* font-size: large; */
}

option:disabled {
  color: #999;
}
</style>